<script setup lang="ts">
// 奖金整网业绩占比
import { storeToRefs } from 'pinia'
import { useDealerDataStore } from '@/stores/module/dealerData'
const dealerDataStore = useDealerDataStore() // 创建store实例
const { dealerScaleInfo } = storeToRefs(dealerDataStore)
</script>
<template>
   <card-box>
    <template v-slot:title>
      <h1>{{dealerScaleInfo.title || ''}}</h1>
    </template>
    <table>
      <tr v-if="dealerScaleInfo?.info&&dealerScaleInfo?.info.length&&dealerScaleInfo?.info.length>0">
        <th>{{ dealerScaleInfo?.info[0]?.typeDesc || '' }}</th>
        <th>{{ dealerScaleInfo?.info[0]?.retailRatioDesc || '' }}</th>
        <th>{{ dealerScaleInfo?.info[0]?.expandRatioDesc || '' }}</th>
        <th>{{ dealerScaleInfo?.info[0]?.pvRatioDesc || '' }}</th>
      </tr>
      <tr v-for="item in dealerScaleInfo.info" :key="item.id">
        <td>{{ item.type }}</td>
        <td>{{ item.retailRatio }}</td>
        <td>{{ item.expandRatio }}</td>
        <td>{{ item.pvRatio }}</td>
      </tr>
    </table>
  </card-box>
</template>
<style lang="scss" scoped>
table {
  border-collapse: collapse;
  border-collapse: separate; /* 将边框和单元格分开 */
  border-spacing: 0 5px; /* 设置单元格和行之间的间距 */
  border: 0;
  table-layout: fixed;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  tr {
    height: 33px;
    line-height: 33px;
    border: 0;
    th {
      background-color: #00EDFF30;
      border: 0;
      text-align: center;
      font-size: 12px;
      // 超出隐藏
      overflow: hidden;
      text-overflow: ellipsis;
    }
    td {
      background-color: #10547730;
      border: 0;
      text-align: center;
      font-size: 12px;
    }
    // 第一列是白色,
    td:first-child {
      color: #fff;
    }
    //其他列是#00EDFF
    td:not(:first-child) {
      color: #00EDFF;
    }
  }
}
</style>
